<template>
  <el-row justify="end" class="drag">
    <div class="titleBar" v-show="!noTop" v-if="ifTop" @click="cancle_top">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="取消置顶"
        placement="bottom"
      >
        <svg class="icon" aria-hidden="true" style="font-size: 1rem; ">
          <use xlink:href="#icon-pin-fill"></use>
        </svg>
      </el-tooltip>
    </div>
    <div class="titleBar" v-show="!noTop" v-else @click="top">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="置顶"
        placement="bottom"
      >
        <svg class="icon" aria-hidden="true" style="font-size: 1rem; ">
          <use xlink:href="#icon-pin"></use>
        </svg>
      </el-tooltip>
    </div>
    <div class="titleBar" @click="min">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="最小化"
        placement="bottom"
      >
        <svg class="icon" aria-hidden="true" style="font-size: 1rem; ">
          <use xlink:href="#icon-reduce"></use>
        </svg>
      </el-tooltip>
    </div>
    <div class="titleBar" v-if="ifMax" @click="cancel_max">
      <svg class="icon" aria-hidden="true" style="font-size: 1rem; ">
        <use xlink:href="#icon-lower-left-arrow"></use>
      </svg>
    </div>
    <div class="titleBar" v-else @click="max">
      <svg class="icon" aria-hidden="true" style="font-size: 1rem; ">
        <use xlink:href="#icon-square"></use>
      </svg>
    </div>
    <div class="titleBar" @click="close">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="关闭"
        placement="bottom"
      >
        <svg class="icon" aria-hidden="true" style="font-size: 1rem; ">
          <use xlink:href="#icon-close"></use>
        </svg>
      </el-tooltip>
    </div>
  </el-row>
</template>
<script>
import {ref,unref, getCurrentInstance, watch, reactive, onMounted} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus';
import {useRouter} from "vue-router";

export default {
  name: "index",
  props:["tray","noTop","suffix"],
  emits:[],
  components:{

  },
  setup(props ,content){
    const router = useRouter()
    const {proxy} = getCurrentInstance();
    let data = {
      ifTop: ref(false),//是否置顶
      ifMax: ref(false),//是否最大化
    }
    //监听
    watch(() => [props.info], ([newInfo],[oldInfo]) => {
      // if (newInfo){
      //   Object.assign(data.form, newInfo)
      // content.emit('update:info',newInfo)
      // }
    })
    onMounted(async () => {
    })
    let methods = {
      //窗口置顶
      top() {
        window.electron.ipcRenderer.send('top'+ (props.suffix ? props.suffix : ''))
        data.ifTop.value = true
      },
      //取消置顶
      cancle_top() {
        window.electron.ipcRenderer.send('cancle_top'+ (props.suffix ? props.suffix : ''))
        data.ifTop.value = false
      },
      //最小化
      min() {
        window.electron.ipcRenderer.send('min'+ (props.suffix ? props.suffix : ''))
      },
      //最大化
      max() {
        window.electron.ipcRenderer.send('max'+ (props.suffix ? props.suffix : ''))
        data.ifMax.value = true
      },
      //取消最大化
      cancel_max() {
        window.electron.ipcRenderer.send('cancel_max'+ (props.suffix ? props.suffix : ''))
        data.ifMax.value = false
      },
      close() {
        if (props.tray) {
          ElMessageBox.confirm(
            '是否直接退出软件或最小化托盘?',
            '警告',
            {
              confirmButtonText: '最小化托盘',
              cancelButtonText: '直接退出',
              type: 'warning',
              distinguishCancelAndClose: true,
            }
          )
            .then(() => {
              methods.hide()
            })
            .catch((action) => {
              if (action === "cancel") {
                console.log('取消按钮')
                methods.destroy()
              } else if (action === "close") {
                console.log('关闭按钮')
              }
              this.$msgbox.close(); // 重点在这里
            })
        }else{
          methods.hide()
        }
      },
      //关闭
      destroy() {
        window.electron.ipcRenderer.send('destroy' + (props.suffix ? props.suffix : ''))
      },
      //关闭
      hide() {
        window.electron.ipcRenderer.send('hide' + (props.suffix ? props.suffix : ''))
      },
    }

    return {
      proxy,
      router,
      ...data,
      ...methods
    }
  }
}
</script>

<style lang="scss" scoped>

.titleBar {
  padding: .4rem 1rem;
  -webkit-app-region: no-drag;
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover {
    background-color: #222222;
    .icon{
      fill: #F7F7F7;
    }
  }

  &:last-child {
    &:hover {
      background-color: red;
    }
  }
}
</style>
